<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('路段经纬度信息上传界面')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-section_map_info-add">
        <label th:text="${roadSection.sectionName}">所选路段名称</label>
        <div class="form-group">
            <label class="col-sm-2 control-label">起始点经纬度
                :</label>
            <div class="col-sm-4">
                <input id="beginPoint" class="form-control" type="text">
            </div>
            <label class="col-sm-2 control-label">截止点经纬度
                :</label>
            <div class="col-sm-4">
                <input id="endPoint" class="form-control" type="text">
            </div>
            <label class="col-sm-2 control-label">途径点经纬度
                :</label>
            <div class="col-sm-8">
                <input id="roadPoint" class="form-control" type="text">
            </div>
            <div class="col-sm-2">
                <select class="selectpicker form-control" data-live-search="true" id="roadDirection">
                    <option value="1">下行</option>
                    <option value="0" selected>上行</option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = ctx + "road/road_map";
    var upOrDownFlag;
    var laAndLongtitudes;
    var splitUpAndDown = [];
    var noData = "null";

    $("#form-road_section_lane-add").validate({
        focusCleanup: true
    });
    $(document).ready(function () {
            laAndLongtitudes = [[${roadSection.remark}]];
            //判断经纬度信息是否为空
            if (laAndLongtitudes) {
                //判断是否上下行都具备，如果只有上行则将下行赋值为 noData
                if (laAndLongtitudes.indexOf("|") == -1) {
                    splitUpAndDown[0] = laAndLongtitudes;
                    splitUpAndDown[1] = noData;
                } else {
                    splitUpAndDown = laAndLongtitudes.split("|");
                    if (splitUpAndDown[0] == "") {
                        splitUpAndDown[0] = noData;
                    }
                    if (splitUpAndDown[1] == "") {
                        splitUpAndDown[1] = noData;
                    }
                }
                laAndLongtitudes = splitUpAndDown[0] + "|" + splitUpAndDown[1];
                var splitPoints = splitUpAndDown[0].split(",");
                fillText(splitPoints);
            }
            upOrDownFlag = $("#roadDirection").val();
        }
    )
    $("#roadDirection").change(function () {
        upOrDownFlag = $("#roadDirection").val();
        var splitPoints = splitUpAndDown[upOrDownFlag].split(",");
        fillText(splitPoints);

    })

    function fillText(splitPoints) {
        var beginPoint = "", endPoint = "", roadPoints = "";
        if (splitPoints != noData && splitPoints.length >= 4) {
            beginPoint = splitPoints[0] + "," + splitPoints[1];
            endPoint = splitPoints[2] + "," + splitPoints[3];
            for (var i = 4; i < splitPoints.length; i++) {
                roadPoints = roadPoints + splitPoints[i++] + "," + splitPoints[i];
                if (i != splitPoints.length - 1) {
                    roadPoints += ",";
                }
            }
        }
        $("#beginPoint").val(beginPoint);
        $("#endPoint").val(endPoint);
        $("#roadPoint").val(roadPoints);
    }

    function submitHandler() {
        if ($.validate.form()) {
            var beginPoint = $("#beginPoint").val();
            var endPoint = $("#endPoint").val();
            var roadPoint = $("#roadPoint").val();
            var upOrDown = "";
            if (upOrDownFlag == 1) {
                upOrDown = "|";
            }
            var points = "";
            if (beginPoint != "" && endPoint != "") {
                points = upOrDown + beginPoint + "," + endPoint;
            }
            if (roadPoint) {
                points = points + "," + roadPoint;
            }
            var newPoints;
            if (splitUpAndDown[upOrDownFlag]) {
                newPoints = laAndLongtitudes.replace(splitUpAndDown[upOrDownFlag], points);
                newPoints = newPoints.replace(noData, "");
            } else {
                newPoints = points;
            }
            var sectionId = [[${roadSection.id}]];
            var data = {
                id: sectionId,
                remark: newPoints
            }
            $.operate.save(prefix + "/upload", data, function (result) {
                //$.modal.msgReload(result.msg);
                if (result.msg=="操作成功"){
                    parent.location.reload();
                }
            });
        }
    }
</script>
</body>
</html>
